<template>
  <div class="counter-component">
    <h4>计数器组件 (v-model)</h4>
    <p>当前计数: {{ modelValue }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const increment = () => {
  emit('update:modelValue', props.modelValue + 1)
}

const decrement = () => {
  emit('update:modelValue', props.modelValue - 1)
}

const reset = () => {
  emit('update:modelValue', 0)
}
</script>

<style scoped>
.counter-component {
  padding: 15px;
  background-color: #f0f7ff;
  border-radius: 6px;
  margin-top: 10px;
}

.counter-component button {
  margin: 0 5px;
  padding: 8px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.counter-component button:hover {
  background-color: #369870;
}
</style>